<template>
  <img src="../../assets/front/index/banner.webp" alt="" class="banner"/>
  <div class="service-container">
    <div class="service">
      <img src="../../assets/front/index/service-icon-1.png" alt=""/>
      <div>
        <h4>体检预约</h4>
        <p>一站式预约服务</p>
      </div>
    </div>
    <div class="service">
      <img src="../../assets/front/index/service-icon-2.png" alt=""/>
      <div>
        <h4>报告查询</h4>
        <p>体检报告快速查询</p>
      </div>
    </div>
    <div class="service">
      <img src="../../assets/front/index/service-icon-3.png" alt=""/>
      <div>
        <h4>活动热卖</h4>
        <p>当季推荐特惠商品</p>
      </div>
    </div>
    <div class="service">
      <img src="../../assets/front/index/service-icon-4.png" alt=""/>
      <div>
        <h4>企业专区</h4>
        <p>企业专属健康服务</p>
      </div>
    </div>
  </div>
  <div class="goods-container">
    <nav>
      <h3>活动专区</h3>
      <el-link :icon="Plus" :underline="false" @click="moreHandle">查看更多
      </el-link>
    </nav>
    <div class="goods-list" v-for="one in data.part_1">
      <div class="item">
        <div class="card">
          <img :src="one.image" alt=""/>
          <h4>{{ one.title }}</h4>
          <el-tooltip class="box-item" effect="dark" placement="top">
            <template #content>
              <div style="width: 260px;">{{ one.description }}</div>
            </template>
            <p class="desc">
              <span>折</span>
              {{ one.description }}
            </p>
          </el-tooltip>
          <p class="price">
            <span class="current">¥{{ one.currentPrice }}</span>
            <span class="old">¥{{ one.initialPrice }}</span>
            <span class="sale">已售{{ one.salesVolume }}</span>
          </p>
          <input type="button" class="buy-btn" value="立即购买" @click="buyHandle(one.id)"/>
        </div>
      </div>
    </div>
  </div>
  <div class="goods-container">
    <nav>
      <h3>热卖套餐</h3>
      <el-link :icon="Plus" :underline="false" @click="moreHandle">查看更多
      </el-link>
    </nav>
    <div class="goods-list" v-for="one in data.part_2">
      <div class="item">
        <div class="card">
          <img :src="one.image" alt=""/>
          <h4>{{ one.title }}</h4>
          <el-tooltip class="box-item" effect="dark" placement="top">
            <template #content>
              <div style="width: 260px;">{{ one.description }}</div>
            </template>
            <p class="desc">
              <span>折</span>
              {{ one.description }}
            </p>
          </el-tooltip>
          <p class="price">
            <span class="current">¥{{ one.currentPrice }}</span>
            <span class="old">¥{{ one.initialPrice }}</span>
            <span class="sale">已售{{ one.salesVolume }}</span>
          </p>
          <input type="button" class="buy-btn" value="立即购买" @click="buyHandle(one.id)"/>
        </div>
      </div>
    </div>
  </div>
  <div class="goods-container">
    <nav>
      <h3>新品推荐</h3>
      <el-link :icon="Plus" :underline="false" @click="moreHandle">查看更多
      </el-link>
    </nav>
    <div class="goods-list" v-for="one in data.part_3">
      <div class="item">
        <div class="card">
          <img :src="one.image" alt=""/>
          <h4>{{ one.title }}</h4>
          <el-tooltip class="box-item" effect="dark" placement="top">
            <template #content>
              <div style="width: 260px;">{{ one.description }}</div>
            </template>
            <p class="desc">
              <span>折</span>
              {{ one.description }}
            </p>
          </el-tooltip>
          <p class="price">
            <span class="current">¥{{ one.currentPrice }}</span>
            <span class="old">¥{{ one.initialPrice }}</span>
            <span class="sale">已售{{ one.salesVolume }}</span>
          </p>
          <input type="button" class="buy-btn" value="立即购买" @click="buyHandle(one.id)"/>
        </div>
      </div>
    </div>
  </div>
  <div class="partner-container">
    <h3>-&nbsp;&nbsp;合作伙伴&nbsp;&nbsp;-</h3>
    <el-carousel height="220px" :autoplay="false">
      <el-carousel-item>
        <el-row :gutter="20">
          <el-col :span="6">
            <img src="../../assets/front/index/c1.png" class="logo"/>
          </el-col>
          <el-col :span="6">
            <img src="../../assets/front/index/c2.png" class="logo"/>
          </el-col>
          <el-col :span="6">
            <img src="../../assets/front/index/c3.png" class="logo"/>
          </el-col>
          <el-col :span="6">
            <img src="../../assets/front/index/c4.png" class="logo"/>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <img src="../../assets/front/index/c5.png" class="logo"/>
          </el-col>
          <el-col :span="6">
            <img src="../../assets/front/index/c6.png" class="logo"/>
          </el-col>
          <el-col :span="6">
            <img src="../../assets/front/index/c7.png" class="logo"/>
          </el-col>
          <el-col :span="6">
            <img src="../../assets/front/index/c8.png" class="logo"/>
          </el-col>
        </el-row>
      </el-carousel-item>
      <el-carousel-item>
        <el-row :gutter="20">
          <el-col :span="6">
            <img src="../../assets/front/index/c9.png" class="logo"/>
          </el-col>
          <el-col :span="6">
            <img src="../../assets/front/index/c10.png" class="logo"/>
          </el-col>
          <el-col :span="6">
            <img src="../../assets/front/index/c11.png" class="logo"/>
          </el-col>
          <el-col :span="6">
            <img src="../../assets/front/index/c12.png" class="logo"/>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <img src="../../assets/front/index/c13.png" class="logo"/>
          </el-col>
          <el-col :span="6">
            <img src="../../assets/front/index/c14.png" class="logo"/>
          </el-col>
          <el-col :span="6">
            <img src="../../assets/front/index/c15.png" class="logo"/>
          </el-col>
          <el-col :span="6">
            <img src="../../assets/front/index/c16.png" class="logo"/>
          </el-col>
        </el-row>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script setup lang="ts">
import {reactive, ref, getCurrentInstance} from "vue";
import {Plus} from "@element-plus/icons-vue";
import router from "../../router/index";

const {proxy} = getCurrentInstance();
const data = reactive({
  part_1: [],
  part_2: [],
  part_3: [],
});

let json = {
  partIds: [1, 2, 3]
};

proxy.$http('/front/goods/searchIndexGoodsByPart', 'POST', json, true, resp => {
  let result = resp.result;
  // 处理第一个区域的封面图片
  for (let one of result['1']) {
    one.image = `${proxy.$minioUrl}/${one.image}`;
    // console.log(proxy.$minioUrl);
    // console.log(one.image);
  }
  data['part_1'] = result['1'];

  // 处理第二个区域的封面图片
  for (let one of result['2']) {
    one.image = `${proxy.$minioUrl}/${one.image}`;
  }
  data['part_2'] = result['2'];

  // 处理第三个区域的封面图片
  for (let one of result['3']) {
    one.image = `${proxy.$minioUrl}/${one.image}`;
  }
  data['part_3'] = result['3'];
});

// 点击立即购买，跳转至指定套餐页面
function buyHandle(id) {
  router.push({name: 'FrontGoods', params: {id: id}});
}

// 查看更多
function moreHandle() {
  router.push({name:'FrontGoodsList'});
}
</script>

<style scoped lang="less">
@import url("index.less");
</style>